<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card>
      <el-table :data="rightsList" border >
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="authName" label="权限名称"> </el-table-column>
        <el-table-column prop="path" label="权限路径"> </el-table-column>
        <el-table-column prop="level" label="权限等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level == 0">一级</el-tag>
            <el-tag v-else-if="scope.row.level == 1" type="success">二级</el-tag>
            <el-tag v-else type="warning">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rightsList: [],
    }
  },
  created() {
    this.getRightList()
  },
  methods: {
    //获取权限列表
    getRightList() {
      var rightList = [
        {
          id: 101,
          authName: '商品管理',
          path: 'goods',
          pid: 0,
          level: 1,
          children: [
            {
              id: 201,
              authName: '商品列表',
              path: null,
              pid: 101,
              children: [
                {
                  id: 301,
                  authName: '添加商品',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 302,
                  authName: '编辑商品',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 303,
                  authName: '删除商品',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
            {
              id: 202,
              authName: '分类参数',
              path: null,
              pid: 101,
              children: [
                {
                  id: 304,
                  authName: '获取参数列表',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 305,
                  authName: '创建商品参数',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 306,
                  authName: '删除商品参数',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
            {
              id: 203,
              authName: '商品分类',
              path: null,
              pid: 101,
              children: [
                {
                  id: 307,
                  authName: '获取商品分类',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 308,
                  authName: '创建商品分类',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 309,
                  authName: '删除商品分类',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
          ],
        },
        {
          id: 102,
          authName: '用户管理',
          path: 'users',
          pid: 0,
          level: 2,
          children: [
            {
              id: 204,
              authName: '用户列表',
              path: null,
              pid: 101,
              children: [
                {
                  id: 310,
                  authName: '添加用户',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 311,
                  authName: '编辑用户',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 312,
                  authName: '删除用户',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
          ],
        },
        {
          id: 103,
          authName: '权限管理',
          path: 'rights',
          pid: 0,
          level: 0,
          children: [
            {
              id: 205,
              authName: '权限列表',
              path: null,
              pid: 101,
              children: [
                {
                  id: 313,
                  authName: '添加权限',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 314,
                  authName: '编辑权限',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 315,
                  authName: '删除权限',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
            {
              id: 206,
              authName: '角色列表',
              path: null,
              pid: 101,
              children: [
                {
                  id: 316,
                  authName: '添加角色',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 317,
                  authName: '编辑角色',
                  path: null,
                  pid: '104,101',
                },
                {
                  id: 318,
                  authName: '删除角色',
                  path: null,
                  pid: '104,101',
                },
              ],
            },
          ],
        },
      ]

      this.rightsList = rightList
    },
  },
}
</script>

<style lang="less" scoped>
</style>